import React, { useEffect, useState } from 'react';
import { Modal } from 'antd';
import styles from '../index.less';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import ActionRecordDetail from '../ActionRecordDetail';


const ActionRecord: React.FC<any> = ({
    tableList,
    visible,
    onCancel,
}) => {
    const [detailVisible, setDetailVisible] = useState<any>(false);
    const [info, setInfo] = useState<any>({});

    const columns: ProColumns<any>[] = [
        {
            title: '任务名称',
            dataIndex: 'targetTypeName',
        },
        {
            title: '操作节点',
            dataIndex: 'approvalNodeName',
        },
        {
            title: '操作时间',
            dataIndex: 'gmtCreate',
            valueType:'dateTime'
        },
        {
            title: '状态',
            dataIndex: 'status',
            valueEnum:{
                '1':{text:'同意',status:'success'},
                '0':{text:'拒绝',status:'error'},
            }
        },
        {
            title: '意见',
            dataIndex: 'remark',
        },
        {
            title: '操作人',
            dataIndex: 'operateUserName',
        },
        {
            title: '操作',
            dataIndex: 'acton',
            render:(text,record)=>{
                return(
                    <a onClick={()=>{
                        setInfo(record)
                        setDetailVisible(true)
                    }} >详情</a>
                )
            }
        },
      ];

    return (
        <>
            <Modal
                closable={true}
                onCancel={onCancel}
                width={1200}
                visible={visible}
                footer={null}
            >
                <ProTable
                    rowKey="id"
                    dataSource={tableList}
                    columns={columns}
                    rowSelection={false}
                    options={false}
                    search={false}
                    pagination={false}
                /> 

            </Modal>
            {
                detailVisible ? 
                <ActionRecordDetail
                    info={info}
                    visible={detailVisible}
                    cancel={()=>{
                        setDetailVisible(false)
                        setInfo({})
                    }}
                />
                :null
            }
        </>
    );
};

export default ActionRecord;
